<template>
	<view class="box-c page">
		<!-- 状态栏 -->
		<state-bar :shopName='shopName' :addressName='addressName'></state-bar>
		<!-- 普通商家列表 -->
		<view class="animated fadeIn" v-if="classifyId==1 || classifyId==2 ||classifyId==3">
			<!-- 横图start -->
			<swiper-custom :list="swiperList"></swiper-custom>

			<classify-switch :classifyId="classifyId"  @getShopList="getShopList" @shopName="getShopName" ></classify-switch>
			<!-- 商家列表 -->
			<view class="box-c l3">
				<scroll-view lower-threshold="500" @scrolltolower='nextPage()' scroll-y="true"
					:style="{height:shopHeight+'px'}">
					<view class="box card rounded-20 animated fadeIn d-ac-c" @tap="productList(shop)"
						v-for="(shop,index) in shopList">
						<view class="box d-jc-c">
							<image style="z-index: 1;border: solid 1rpx #e8e8e8;" :src="shop.shopLogo" class="box logo"
								mode=""></image>
						</view>
						<view class="box-c d-jc-c">
							<view class="box">
								<text style="font-size: 32rpx;font-weight: 800;">{{shop.shopName}}</text>
								<text class="describe-font"
									style="height: 60rpx;line-height: 60rpx; position: absolute; right: 100rpx;">{{shop.distance}}</text>
							</view>
							<view class="box" style="margin-left: -8rpx;">
								<text class="describe-font date">{{shop.workTime}}</text>
							</view>
							<view class="box">
								<text class="describe-font">
									{{shop.city}} {{shop.district}} {{shop.address}}
								</text>
							</view>
							<view class="box tag-box" v-if="classifyId!==3">
								<view class="tag" v-for="item in shop.shopLabelDto">
									<text style="padding: 0rpx 10rpx;color: #ff3d3d;">
										{{item}}
									</text>
								</view>

							</view>

						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 活动列表 -->
		<view class="animated fadeIn" v-if="classifyId==4">
			<activity :activityHeight='activityHeight' :city='addressName' ref='getActivityList'></activity>
		</view>
		<wybPopup ref="popup" type="center">
				    <view class="pop_t">
						<view class="refundtitle">
							提示
						</view>
						<view class="pop_c">
							检测到您还未实名认证哦，请先前往实名认证体验更多服务!
						</view>
						<view class="bottom box d-jc-c">
							<view class="sure"  @tap="sure">
								确定
							</view>
						</view>
					</view>
		</wybPopup>
	</view>
</template>
<script>
	import hansTabber from '@/components/hans-tabbar/hans-tabbar.vue'
	import activity from '@/components/activity/activity.vue'
	import classifySwitch from '@/components/classify-switch/classify-switch.vue'
	import wybPopup from '@/components/popup/uni-popup.vue'
	export default {

		components: {
			hansTabber,
			activity,
			classifySwitch,
			wybPopup
		},
		data() {
			return {
				shopList: '',
				pageNum: 1,
				pageSize: 5,
				classifyId: '', //店铺所属分类
				shopHeight: 0,
				activityHeight: 0,
				hasNextPage: true,
				longitude: '',
				latitude: '',
				citycode: '',
				addressName: '',
				status: '',
				shopName: '',
				listType: 2,
				swiperList: ['../../static/images/tab3.png', '../../static/images/list_2.png',
					'../../static/images/list3.jpg'
				],
			}
		},

		onShow() {
			console.log("aaaaaaaaaaaaaaaa")
			this.setClassifyId()
			this.checkname()
			if (this.classifyId === 1) {
				this.shopName = "老年餐厅"
			} else if (this.classifyId === 2) {
				this.shopName = "老年就医"
			} else if (this.classifyId === 3) {
				this.shopName = "老年大学"
			} else if (this.classifyId === 4) {
				this.shopName = "活动中心"
				this.clickParent()


			}
			this.handleAdress()

		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '../index/index',
				animationType: ''
			})
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.shopHeight = res.windowHeight - uni.upx2px(525) //windoHeight为窗口高度，主要使用的是这个
					that.activityHeight = res.windowHeight - uni.upx2px(270) //windoHeight为窗口高度，主要使用的是这个

				}
			})

		},
		onLoad() {
			this.getCityBylng()
		},
		onBackPress(){
			console.log(11111) 
		},
		methods: {
			sure(){
				 uni.navigateTo({
				    url:'../user/changeInfo'
				     })
			},
			checkname(){   
				this.$api.checkname().then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						if(res.data.dataMap===2){
							this.$refs.popup.open('bottom')
							uni.hideTabBar()
							 // uni.navigateTo({
								// 			    url:'../user/changeInfo'
								// 			     })
						}else{
							this.$refs.popup.close()
							uni.showTabBar()
						}
					}
				})
			},
			getShopName(e){
				this.shopName = e
			},
	
			clickParent() {
				let _this = this
				setTimeout(function() {
					_this.$refs.getActivityList.getListActivityClassify();
				}, 10);
			},

			//地址监听
			handleAdress() {
				uni.$on("handleAddress", res => {
					this.longitude = res.parameter.longitude
					this.latitude = res.parameter.latitude
					this.addressName = res.parameter.name
					// 清除监听
					uni.$off('handleAddress');
					this.getShopList()
				})
			},

			//根据经纬度获取位置
			getCityBylng() {
				let _this = this
				// permision.gotoAppPermissionSetting()
				// let flag = permision.checkSystemEnableLocation()
				let flag = true
				console.log(flag)
				if (flag) {
					//开启定位

					uni.getLocation({
						type: 'wgs84',
						success: function(res) {
							uni.request({
								url: "https://restapi.amap.com/v3/geocode/regeo",
								method: 'GET',
								data: {
									key: '6d77b7119a4fb52745394ea5590ccf52',
									location: `${res.longitude}, ${res.latitude}`
								},
								success: (data) => {
									_this.longitude = res.longitude
									_this.latitude = res.latitude
									if (data.data.regeocode.addressComponent
										.city instanceof Array) {
										_this.addressName = data.data.regeocode.addressComponent
											.province
									} else {
										_this.addressName = data.data.regeocode.addressComponent
											.city
									}
									_this.getShopList()

								},
								fail(err) {
									console.log(err)
								}
							})

						},
						fail() {
							uni.showToast({
								title: "请检查位置是否开启",
								duration: 1500,
								icon: "none"
							});
							console.log("失败了")
							setTimeout(function() {
								permision.gotoAppPermissionSetting()
							}, 1000);
							_this.addressName = '定位失败'


						}
					});
				} else {
					uni.showToast({
						title: "请检查位置是否开启",
						duration: 1000,
						icon: "none"
					});
					setTimeout(function() {
						permision.gotoAppPermissionSetting()
					}, 1500);
					_this.addressName = '定位失败'
					return;
				}


			},
			jumpTo() {
				uni.navigateTo({
					url: './locateadress',
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			goBack() {
				uni.navigateTo({
					url: "../index/index",
					animationType: 'pop-in',
					animationDuration: 350
				})
			},
			setClassifyId() {
				this.classifyId = uni.getStorageSync('classifyId')
				console.log(this.classifyId)

			},
			back() {
				uni.navigateBack({
					delta: 1,
					animationType: 'zoom-fade-in',
					animationDuration: 100
				})
			},
			nextPage() {
				let _this = this
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					this.$api.getShopList({
						classifyId: this.classifyId,
						longitude: this.longitude,
						latitude: this.latitude,
						cityCodeCity: this.citycode
					}, this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							for (var i = 0; i < res.data.data.list.length; i++) {
								this.shopList.push(res.data.data.list[i])
							}
							this.hasNextPage = res.data.data.hasNextPage
						}
					})
				} else {


				}

			},
			getShopList() {
				if(this.latitude===''){
					uni.showToast({
						title: "请检查位置是否开启",
						duration: 1000,
						icon: "none"
					});
				}else{
					this.setClassifyId()
					this.shopList = ''
					this.pageNum = 1
					this.$api.getShopList({
						classifyId: this.classifyId,
						longitude: this.longitude,
						latitude: this.latitude,
						cityCodeCity: this.citycode
					}, this.pageNum, this.pageSize).then((res) => {
						console.log(res.data.data.list)
						if (res.statusCode) {
							this.shopList = res.data.data.list
							this.hasNextPage = res.data.data.hasNextPage
							for (var i = 0; i < this.shopList.length; i++) {
								this.shopList[i].distance = this.setMorKm(res.data.data.list[i].distance)
							}
						}
					})
				}
				

			},
			setMorKm(m) {
				var n = ''
				if (m) {
					if (m >= 1000) {
						n = (m / 1000).toFixed(2) + 'km'
					} else {
						n = m + 'm'
					}
				} else {
					n = '0m'
				}
				return n
			},

			productList(shop) {
				console.log(JSON.stringify(shop))
				if (shop.isActivity == 2) {
					uni.navigateTo({
						url: '/pages/shopList/product-activity?shopId=' + shop.shopId + '&classifyId=' + shop
							.classifyId,
						animationType: 'pop-in',
						animationDuration: 200
					})
				} else if (shop.isActivity == 1) {
					uni.navigateTo({
						url: '/pages/shopList/product?shopId=' + shop.shopId + '&classifyId=' + shop.classifyId,
						animationType: 'pop-in',
						animationDuration: 200
					})
				}

			}
		}
	}
</script>

<style lang="less">
	.pop_c{
		text-align: center;
		padding: 0 20rpx;
		color: #4f4f4f;
	}
	.sure{
		width: 99%;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #FF7E51;
		margin-top: 20rpx;
	}
	.refundtitle{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	.pop_t{
		width: 580rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	page {
		height: 100%;
		background-color: #F8F8F8;
	}

	.top {
		color: #fff;
		padding: var(--status-bar-height) 20rpx 10rpx 20rpx;
		background-color: rgb(255, 85, 81);

		.icon {
			.iconfangdajing {
				font-size: 36rpx;
				text-align: right;
			}

			.icon-location {
				font-size: 36rpx;
			}

			.address {
				font-size: 32rpx;

			}

			.address-box {
				width: 200rpx;
				text-align: right;
			}
		}

		.iconfanhui {
			font-size: 32rpx;
		}

		.title {
			text-align: center;
			font-size: 32rpx;
		}
	}

	.page {
		background-color: #F8F8F8;
	}






	.describe-font {
		font-size: 22rpx;
		font-weight: 400;
		color: #888181;
	}

	.describe-font.date {
		padding: 0rpx 8rpx;
	}

	.tag-box {
		margin-left: -10rpx;
		flex-wrap: wrap;
		padding-bottom: 10rpx;
	}

	.tag {
		margin: 5rpx 5rpx;
		flex-wrap: wrap;
		justify-content: space-around;
		border-radius: 8rpx;
		background-color: #ff7d7d;
		background-color: rgba(255, 79, 79, 0.3)
	}


	.card {
		width: 700rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		height: 180rpx;
		margin-top: 10px;
		/* -moz-box-shadow: #d5d5d5 0px 0px 10px; */
		/*firefox*/
		/* -webkit-box-shadow: #eeeeee 0px 0px 10px; */
		/*safari或chrome*/
		/* box-shadow: #cecece 0px 0px 10px; */
		/*opera或ie9*/
	}

	.logo {
		width: 150rpx;
		height: 150rpx;
		margin: 20rpx 10rpx 40rpx 10rpx;
		border-radius: 20rpx;
	}

	.tabbar {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
